import * as React from 'react'
import {View, SafeAreaView, Text, Image, TextInput ,StyleSheet, TouchableOpacity} from 'react-native'
import * as Animate from 'react-native-animatable'
import Back from '../../../../common/component/back'


let titleArr = [
  {icon: require("./img/username.png"),title: "账号设置",url: 'SettingListPage'},
  {icon: require("./img/username.png"),title: "通知设置",url: 'SettingListPage'},
  {icon: require("./img/username.png"),title: "清除缓存",url: 'SettingListPage'},
  {icon: require("./img/username.png"),title: "关于我们",url: 'SettingListPage'},
  {icon: require("./img/username.png"),title: "隐私政策",url: 'SettingListPage'},
  {icon: require("./img/username.png"),title: "推荐我们",url: 'SettingListPage'},
]


const SetListView = ({navigation,title,icon,index,url}) => {

  let uurl = url || 'Home'
  
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center' ,
      fontWeight: '900',
      marginBottom: 25
    },
    title: {
      fontWeight: 'bold',
      marginLeft: 15
    },
    icon: {
      position: 'absolute', 
      right: 15,
      fontSize: 12, 
      fontWeight: '700'
    }
  })

  return (
    <>
    <TouchableOpacity style={ [styles.container, (index === 3) && { marginTop: 20}] } onPress={()=>{navigation.navigate(uurl,{pageTitle: title})}}>
      <Image source={icon}/>
      <Text style={ styles.title }>
        {title}
      </Text>
      <Text style={styles.icon}>></Text>
    </TouchableOpacity>
    </>
  )
}


class Setting extends React.Component {

  constructor(props){
    super(props)
  }


  render() {

    let {navigation} = this.props;

    return(
      <SafeAreaView style={styles.container}>
         <Back navigation={navigation} witheIcon={false}></Back>

        <View style={{ flex: 1 ,margin: 15}}>
         
          <Text style={styles.title}>设置中心</Text>
          <View style={{marginTop: 20}}>
            {titleArr.map((item,index)=>{
              return (
              <SetListView navigation={navigation} title={item.title} icon={item.icon} index = {index} url={item.url} key={item+index} ></SetListView>
              )
            })}
          </View>
          


        </View>
      </SafeAreaView>
    )
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    // margin: 20,
    backgroundColor: 'white'
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginTop: 0,
    marginBottom: 20,
  },
})



export default Setting